// Chat Content
// -------------------------

.chat-content {
	.media-body {
		padding: 10px;
		border: 1px solid @primary;
		border-radius: 2px;
		box-shadow: inset 0 -3px 0 @primary;
	}
	.other {
		.media-body {
			border: 1px solid @gray;
			box-shadow: inset 0 -3px 0 @gray;
		}
	}
}

// Activities
// -----------------------------
.activities {
	li {
		position: relative;
		padding: 10px 10px 10px 40px;
		&:before {
			content: "";
			position: absolute;
			left: 15px;
			top: 0;
			height: 100%;
			border-left: 1px solid @gray;
		}
		&:after {
			content: "";
			position: absolute;
			left: 10px;
			top: 10px;
			height: 11px;
			width: 11px;
			border-radius: 50%;
			background-color: @gray;
		}
	}
}

.activities {
	li {
		&.activity-primary {
		    .activity-variant(@primary);
		}
		&.activity-success {
		    .activity-variant(@success);
		}
		&.activity-info {
		    .activity-variant(@info);
		}
		&.activity-warning {
		    .activity-variant(@warning);
		}
		&.activity-danger {
		    .activity-variant(@danger);
		}
	}
}

.activity-variant(@color) {
	&:before,
	&:after {
		border-color: @color;
		background-color: @color;
	}
}